<template>

    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" width="80%" >
        <addEditBaseWageView ref="addEditBaseWageView" />
        <addFileView ref="addFileView" />
        <div style="padding-bottom:60px;">
            <el-row :gutter="0" style="border-top: 1px solid #dedede;border-left: 1px solid #dedede;">
                <el-col :span="8" v-for=" item in list">
                    <div style="display:flex;border-bottom: 1px solid #dedede;border-right: 1px solid #dedede;">
                        <div style="flex: 1;padding: 4px;">{{ item.teacherWageTypeName }}</div>
                        <div style="flex: 1;padding: 4px; border-left: 1px solid #dedede;">{{ item.wages }}</div>
                    </div>
                </el-col>
            </el-row>
        </div>

    </el-dialog>
</template>
<script>
// import addEditBaseWageView from "@/components/addEditBaseWage.vue";
// import addFileView from "@/components/addExcelFile.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture, Upload } from "@element-plus/icons-vue";
import { ref } from "vue";

export default {
    name: "BaseWageListView",
    data() {
        return {
            type: 0,
            title: "",
            dialogFormVisible: ref(false),
            myList:"",
            page: 0,
            pageSize: 10,
            total: 0,
            limit: 10,
            list: [],
            form: {
                teacherNumber: "",
                teacherName: "",
                teacherWageTypeName: "",
                wageTypeName: "",
                wageMonth: "",
                uuid: "",
            },
        };
    },
    components: {
        // addEditBaseWageView,
        // addFileView,
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        ElMessage, Upload
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
    },
    watch: {

    },
    methods: {
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getBaseWageList();
            }
        },
        add() {
            this.$refs.addEditBaseWageView.title = "添加"
            this.$refs.addEditBaseWageView.personnelType = this.type
            this.$refs.addEditBaseWageView.dialogFormVisible = true;
        },
        editBaseWage(obj) {
            this.$refs.addEditBaseWageView.title = "修改信息"
            this.$refs.addEditBaseWageView.getBaseWageById(obj.id);
            this.$refs.addEditBaseWageView.dialogFormVisible = true;
        },
        deleteBaseWage(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                        params.append("id", id);
                    httpService("/javaApi/baseWage/deleteById", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getBaseWageList();
                            } else {
                                ElMessage.error(data.message);
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },
        reloadData() {
            this.page = 1;
            this.getBaseWageList()
        },
        importExcel() {
            this.$refs.addFileView.dialogFormVisible = true;
            this.$refs.addFileView.title = "批量导入";
            this.$refs.addFileView.uploadApiUrl = "/javaApi/baseWage/importExcel";
        },
        exportExcel() {
            httpService(
                "/javaApi/baseWage/exportExcel",
                {
                    "teacherNumber": this.form.teacherNumber,
                    "teacherName": this.form.teacherName,
                    "teacherWageTypeName": this.form.teacherWageTypeName,
                    "wageTypeName": this.form.wageTypeName,
                    "wageMonth": this.form.wageMonth,
                    "uuid": this.form.uuid,
                },
                "get"
            ).then((data) => {
                if (data.code == 200) {
                    window.open(data.msg, '_blank')
                }
            });
        },
        onSubmit() {
            this.getBaseWageList();
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getBaseWageList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getBaseWageList();
        },
        tableRowClassName({ row, rowIndex }) {
            return "";
        },
        getBaseWageList(obj) {
            let url = "/javaApi/baseWage/list/1/200";
            if(this.myList!=''){
                url = "/javaApi/baseWage/myList/1/200";
            }
            httpService(
                url,
                {
                    "teacherNumber": obj.teacherNumber,
                    "teacherName": obj.teacherName,
                    "uuid": obj.uuid,
                },
                "get"
            ).then((data) => {
                this.list = data.list;
                this.total = data.total;
                this.pageCount = data.pages;
            });
        },
    },
};
</script>
<style scoped>
.el-main {
    padding: 0px;
}

.teacher-content {
    width: 100%;
}

.app-table {
    padding: 10px;
}

.app-search {
    margin-top: 0px;
}

.app-separator {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

.app-body {
    background: white;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
}

.app-body div {
    width: 160px;
    border: 1px solid #eff3f5;
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
    text-align: center;
    margin-top: 10px;
}
</style>


<style>

</style>